<template>
  <div class="myFans">
    <!-- title 设置标题
      right 右边内容
      leftArrow是否需要箭头
      调转路径 onClickRight 右边点击事件-->
    <van-nav-bar
      :left-arrow="leftArrow"
      @click-left="$router.push(path)"
      @click-right="onClickRight"
    >
      <template #title>
        <van-tabs
          v-model="activeName"
          background="#3296fa"
          color="#fff"
          title-inactive-color="#fff"
          title-active-color="#fff"
        >
          <van-tab title="关注" name="a"></van-tab>
          <van-tab title="粉丝" name="b"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <div class="right">
          {{ right }}
        </div>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 1
    }
  },
  props: {
    leftArrow: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '标题'
    },
    right: {
      type: String
    },
    path: {
      type: String
    }
  },
  methods: {
    // 右边点击事件
    onClickRight () {
      this.$emit('onClickRight')
    },
    onClick (name) {
      this.$parent.model = name
    }
  }
}
</script>

<style lang="less" scoped>
.myFans {
  .van-nav-bar {
    background-color: #3296fa;
    ::v-deep .van-nav-bar__title {
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 1px;
      color: #ffffff;
    }
  }
  ::v-deep .van-nav-bar__right {
    color: #fff;
  }
  ::v-deep .van-icon-arrow-left::before {
    color: #fff;
  }
}
</style>
